/**
 * Created by thinkpad on 2017-05-31.
 */

XBox.define("grid.page2", {
    title: "官网列表示例",
    templates: {
        main: ["<div>" +
        "            <div class='grid'></div>" +
        "</div>"],
    },
    elements: {
        grid: ".grid"
    },
    baseUrl: "http://192.168.10.14:9990//webapi/v1",
    delegates: {
        "a.btnAdd": function () {
            var that = this;
            var wnd = new XBox.window({
                icon: "k-icon k-i-window-maximize",
                title: "<span style='color:#f00'>新增一个商品</span>",
                destroyWhenClose: true,
                init: function () {
                    this.form = new XBox.form({
                        container: this.container,
                        action: "append",
                        itemClass: "form-item",
                        items: {
                            ProductName: { "type": "text", text: "商品名称", validation: { required: true }, },
                            UnitPrice: { "type": "kendo-number", text: "单价", options: { format: "c" } },
                            UnitsInStock: { "type": "kendo-number", text: "库存", option: { format: "n0", decimals: 0 } },
                            Discontinued: { "type": "checkbox", text: "是否折扣" },
                        }
                    });
                },
                buttons: [{
                    text: "取消",
                    name: "btnCancel",
                    theme: "",//"k-primary",
                    handler: "cancel"//名称或函数
                },
                {
                    text: "确定",
                    name: "btnOk",
                    theme: "k-primary",//"k-primary",
                    handler: "ok"//名称或函数
                }],
                ok: function () {
                    if (this.form && this.form.validAll()) {
                        var data = this.form.getValues();
                        console.log(data);
                        XBox.Ajax.post({
                            url: that.baseUrl + "/Test/Create2",
                            data: JSON.stringify(data),
                            contentType: "application/json",
                            scope: this,
                            success: function () {
                                that.grid.dataSource.read();
                                that.grid.refresh();
                                this.close();
                            },
                            error: function () {
                                XBox.notify.error("提交时发生一个错误。")
                            }
                        });
                    } else {
                        var error = XBox.valuesOf(this.form.errors);
                        XBox.notify.error(error.join());
                    }
                },
                cancel: function () {
                    this.close();
                }
            });
        }
    },
    afterRender: function () {
        this.controls.grid.kendoGrid({
            "columns": [
                {
                    "title": "Product name",
                    "headerAttributes": { "data-field": "ProductName", "data-title": "Product name" },
                    "field": "ProductName",
                    "encoded": true,
                    "editor":
                        '<input class="k-textbox" data-val="true" data-val-remote="Product name is invalid." data-val-remote-additionalfields="*.ProductName" data-val-remote-url="/aspnet-mvc/Validation/IsProductName_Available" data-val-required="The Product name field is required." id="ProductName" name="ProductName" /><span class="field-validation-valid" data-valmsg-for="ProductName" data-valmsg-replace="true"></span>'
                }, {
                    "title": "Unit price",
                    "headerAttributes": { "data-field": "UnitPrice", "data-title": "Unit price" },
                    //"width": "140px",
                    "field": "UnitPrice",
                    "format": "{0:C}",
                    "encoded": true,
                    "editor":
                        '<input data-val="true" data-val-number="The field Unit price must be a number." data-val-range="The field Unit price must be between 0 and 2147483647." data-val-range-max="2147483647" data-val-range-min="0" data-val-required="The Unit price field is required." id="UnitPrice" max="2147483647" min="0" name="UnitPrice" style="width:100%" type="text" value="0" /><script>\r\n\tkendo.syncReady(function(){jQuery("#UnitPrice").kendoNumericTextBox({"format":"c"});});\r\n</script><span class="field-validation-valid" data-valmsg-for="UnitPrice" data-valmsg-replace="true"></span>'
                }, {
                    "title": "Units in stock",
                    "headerAttributes": {
                        "data-field": "UnitsInStock",
                        "data-title": "Units in stock"
                    },
                    //"width": "140px",
                    "field": "UnitsInStock",
                    "encoded": true,
                    "editor":
                        '<input data-val="true" data-val-number="The field Units in stock must be a number." data-val-range="The field Units in stock must be between 0 and 2147483647." data-val-range-max="2147483647" data-val-range-min="0" data-val-required="The Units in stock field is required." id="UnitsInStock" max="2147483647" min="-2147483648" name="UnitsInStock" style="width:100%" type="text" value="0" /><script>\r\n\tkendo.syncReady(function(){jQuery("#UnitsInStock").kendoNumericTextBox({"format":"n0","decimals":0});});\r\n</script><span class="field-validation-valid" data-valmsg-for="UnitsInStock" data-valmsg-replace="true"></span>'
                }, {
                    "title": "Discontinued",
                    "headerAttributes": { "data-field": "Discontinued", "data-title": "Discontinued" },
                    //"width": "100px",
                    "field": "Discontinued",
                    "encoded": true,
                    "editor":
                        '<input class="k-checkbox" data-val="true" data-val-required="The Discontinued field is required." id="Discontinued" name="Discontinued" type="checkbox" value="true" /><label class="k-checkbox-label" for="Discontinued"></label><input name="Discontinued" type="hidden" value="false" /><span class="field-validation-valid" data-valmsg-for="Discontinued" data-valmsg-replace="true"></span>'
                }, {
                    //"width": "110px",
                    "command": [{ "name": "edit" }, { "name": "destroy" }]
                }
            ],
            "pageable": { "buttonCount": 10 },
            "sortable": true,
            "scrollable": { "height": "200px" },
            "editable": {
                "confirmation": "确定删除吗?",
                "confirmDelete": "删除",
                "cancelDelete": "取消",
                "mode": "inline",
                "template": null,
                "create": true,
                "update": true,
                "destroy": true
            },
            "toolbar": [
                { template: '<a class="k-button btnAdd" href="javascript:void(0)">新增</a>' },
                //{ "name": "create" },
                //{ "name": "save" },
                //{ "name": "cancel" }
            ],
            "messages": { "noRecords": "No records available." },
            "dataSource": {
                type: "webapi",
                "transport": {
                    "read": { "url": this.baseUrl + "/Test/Get" },
                    "update": { "url": this.baseUrl + "/Test/Update", type: "post" },
                    "create": { "url": this.baseUrl + "/Test/Create", type: "post" },
                    "destroy": { "url": this.baseUrl + "/Test/Destroy", type: "post" },
                    "parameterMap": function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                "pageSize": 10,
                "page": 0,
                "total": 0,
                "schema": {
                    total: "Total",
                    data: "Data",
                    "model":
                        {
                            "id": "ProductID",
                            "fields":
                              {
                                  "ProductID": { "type": "number" },
                                  "ProductName": { "type": "string" },
                                  "UnitPrice": { "type": "number" },
                                  "UnitsInStock": { "type": "number" },
                                  "Discontinued": { "type": "boolean" }
                              }
                        }
                },
                "batch": true
            },
            "navigatable": true
        });
        this.grid = this.controls.grid.data("kendoGrid");

        var data = {
            "ProductName": "Chai222",
            "UnitPrice": 21,
            "UnitsInStock": 42,
            "Discontinued": false
        };
    }
});
